import React, {Component, createRef} from 'react';
import {Carousel, List, Card, Button, Modal, Form, Select, InputNumber, Input, message} from 'antd'
import './homePage.less'
import { addOrder } from "../../api/order";
import { getUsedCars} from "../../api/car";
import { getMoney, reducePrice} from "../../api/user";
import photo1 from './1.png'
import photo2 from './2.jpg'
import photo3 from './3.jpg'
import {connect} from 'react-redux'

const mapStateToProps = (state,props) => {
    return {
        userInfoId: state.user.info.id,
        userInfoNumber: state.user.info.number
    }
}
@connect(mapStateToProps)
class HomePage extends Component {
    constructor(props){
        super(props);
        this.addFormRef = new createRef();
        this.moneyRef = new createRef();
        this.state = {
            data : [
                {
                    title: 'Title 1',
                },
                {
                    title: 'Title 2',
                },
                {
                    title: 'Title 3',
                },
                {
                    title: 'Title 4',
                },{
                    title: 'Title 5',
                },{
                    title: 'Title 6',
                },{
                    title: 'Title 7',
                },{
                    title: 'Title 8',
                },{
                    title: 'Title 9',
                },
            ],
            addIsVisible: false,
            confirmLoading: false,
            money: 0,
            usedCars: [],
            price: 0,
            selectCarId: '',
            layout: {
                labelCol: {
                    span: 6,
                },
                wrapperCol: { span: 8 },
            }
        }
    }

    lease = (carInfo) => {
        this.setState({
            addIsVisible: true,
            price: carInfo.price,
            selectCarId: carInfo.id
        })
    }

    changeTime = (e) => {
        this.addFormRef.current.setFieldsValue({
            money: e ? Math.ceil(e * this.state.price) : ''
        })
    }

    addCancel = () => {
        this.setState({
            addIsVisible: false,
            price: 0,
            selectCarId: ''
        })
        this.addFormRef.current.setFieldsValue({
            money: '',
            time: ''
        })
    }

    addOk = () => {
        const userId = this.props.userInfoId
        const info = this.addFormRef.current.getFieldsValue();
        if (this.state.money < info.money){
            message.warn('余额不足，请及时充值')
        }else{
            this.setState({
                confirmLoading: true
            })
            reducePrice({price: info.money,number: this.props.userInfoNumber}).then(res => {
                message.success(res.msg);
            }).catch(err => {
                console.log(err)
            })
            addOrder({userId,carId: this.state.selectCarId,...info}).then(res => {
                this.init();
                this.setState({
                    addIsVisible: false,
                    price: 0,
                    selectCarId: ''
                })
            }).catch(err => {
                console.log(err)
            }).finally(() => {
                this.setState({
                    confirmLoading: false,
                })
            })
        }
    }

    init = () => {
        getUsedCars().then(res => {
            this.setState({
                usedCars: res.data
            })
        }).catch(err => {
            console.log(err)
        });
        console.log(this.props.userInfoNumber)
        getMoney({number: this.props.userInfoNumber}).then(res => {
            this.setState({
                money: res.data.money
            })
        }).catch(err => {
            console.log(err)
        })
    }

    componentDidMount() {
        this.init();
    }

    render() {
        return (
            <div className='homepage'>
                <Carousel autoplay>
                    <div>
                        <img src={photo2} alt="..."/>
                    </div>
                    <div>
                        <img src={photo3} alt="..."/>
                    </div>
                </Carousel>
                <div className='produce'>
                    <Modal
                        visible={this.state.addIsVisible}
                        title="添加租赁信息"
                        confirmLoading={this.state.confirmLoading}
                        maskClosable={false}
                        okText="确定添加"
                        cancelText="取消"
                        onCancel={this.addCancel}
                        onOk={this.addOk}
                    >
                        <Form
                            {...this.state.layout}
                            name="add_lease"
                            className="add_lease"
                            ref={this.addFormRef}
                            initialValues={{ remember: true }}
                        >
                            <Form.Item
                                label="租赁时间"
                                name="time"
                            >
                                <InputNumber onChange={this.changeTime}/>
                            </Form.Item>
                            <Form.Item
                                label="租金"
                                name="money"
                            >
                                <Input prefix="￥" ref={this.moneyRef} suffix="RMB" disabled={true}/>
                            </Form.Item>
                        </Form>
                    </Modal>
                    <List
                        grid={{ gutter: 16, column: 4 }}
                        dataSource={this.state.usedCars}
                        className='mod_list'
                        renderItem={item => (
                            <List.Item>
                                <Card
                                    hoverable
                                    style={{ width: 280}}
                                    cover={<img alt="example" src={item.carAvater} />}
                                >
                                    <div>
                                        <span>{item.name}</span>
                                        <span className='mod_number'>{item.carNumber}</span>
                                    </div>
                                    <div className='mod_item2'>
                                        <div className='mod_itemPrice'>
                                            <span>{item.price}</span>
                                            <span className='mod_price'>元/小时</span>
                                        </div>
                                        <Button onClick={this.lease.bind(this,item)}>租入</Button>
                                    </div>
                                </Card>
                            </List.Item>
                        )}
                    />
                </div>
            </div>
        );
    }
}

export default HomePage;